{% load static %}
<!DOCTYPE html>
<html lang="en" data-layout="horizontal" data-topbar-color="dark">
  <head>
    <meta charset="utf-8" />
    <title>reNgine Onboarding</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="{% static 'bootstrap/bootstrap.min.css' %}" rel="stylesheet" type="text/css" id="bootstrap-stylesheet" />
    <link href="{% static 'assets/css/app.min.css' %}" rel="stylesheet" type="text/css" id="main-stylesheet" />
    <style>
      .card {
        transition: all 0.3s ease;
        border: none;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
      }
      .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      }
      .form-control:focus, .form-select:focus {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
      }
      .form-switch {
        padding-left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .form-switch .form-check-input {
        margin-left: 0.5em;
        width: 3em;
        height: 1.5em;
      }
      .form-check-input:checked {
        background-color: #0d6efd;
        border-color: #0d6efd;
      }
    </style>
  </head>
  <body class="authentication-bg authentication-bg-pattern">
    <div class="account-pages mt-5 mb-5">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xl-10">
            <form method="POST" autocomplete="off"> {% csrf_token %}
              <div class="text-center mb-4">
                <h3 class="text-white">Welcome to reNgine</h3>
                <p class="text-muted">Let's set up your environment to get started with reNgine.</p>
              </div>
              {% if error %}
              <div class="alert alert-danger">
                {{error}}
              </div>
              {% endif %}
              <div class="card mb-4">
                <div class="card-body">
                  <h5 class="card-title"><i class="fe-folder text-primary me-2"></i>Project</h5>
                  <p class="card-text text-muted">Create your first project to organize and manage your security assessments.</p>
                  <div class="mb-3">
                    <label for="project_name" class="form-label">Project name</label>
                    <input class="form-control" type="text" id="project_name" name="project_name" required value="Default">
                  </div>
                </div>
              </div>
              <div class="card mb-4">
                <div class="card-body">
                  <h5 class="card-title"><i class="fe-user-plus text-primary me-2"></i>Additional User</h5>
                  <p class="card-text text-muted">Add an additional user and assign them a role. You can manage users and their roles anytime in the future.</p>
                  <div class="mb-3">
                    <label for="create_username" class="form-label">Username</label>
                    <input class="form-control" type="text" id="create_username" name="create_username" autocomplete="off">
                  </div>
                  <div class="mb-3">
                    <label for="create_password" class="form-label">Password</label>
                    <input class="form-control" type="password" id="create_password" name="create_password" autocomplete="new-password">
                  </div>
                  <div class="mb-3">
                    <label for="create_user_role" class="form-label">Role</label>
                    <select class="form-select" id="create_user_role" name="create_user_role">
                      <option value='sys_admin'>Sys Admin</option>
                      <option value='penetration_tester'>Penetration Tester</option>
                      <option value='auditor'>Auditor</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="card mb-4">
                <div class="card-body">
                  <h5 class="card-title"><i class="fe-settings text-primary me-2"></i>User Preferences</h5>
                  <p class="card-text text-muted">Customize your reNgine experience with these preferences.</p>
                  <div class="mb-3">
                    <div class="form-check form-switch">
                      <label class="form-check-label" for="bug_bounty_mode">
                        <i class="fe-target text-primary me-2"></i>
                        <span class="fw-bold">Bug Bounty Mode</span>
                      </label>
                      <input class="form-check-input" type="checkbox" id="bug_bounty_mode" name="bug_bounty_mode" {% if user_preferences.bug_bounty_mode %}checked{% endif %}>
                    </div>
                    <small class="text-muted d-block mt-2">
                      Enabling Bug Bounty Mode will:
                      <ul class="mt-1">
                        <li>Activate automatic reporting to HackerOne</li>
                        <li>Enable the Bounty Hub for importing HackerOne programs</li>
                        <li>Provide bug bounty specific features and optimizations</li>
                      </ul>
                    </small>
                  </div>
                </div>
              </div>
              <div class="card mb-4">
                <div class="card-body">
                  <h5 class="card-title"><i class="fe-key text-primary me-2"></i>API Keys</h5>
                  <p class="card-text text-muted">Enter your API keys for various services to enhance reNgine's capabilities.</p>
                  <div class="mb-3">
                    <label for="key_openai" class="form-label">OpenAI Key</label>
                    <input class="form-control" type="text" id="key_openai" name="key_openai" placeholder="Enter OpenAI Key" value="{{openai_key}}">
                    <small class="text-muted">Used for generating vulnerability descriptions, remediation, impact, and report writing using ChatGPT.</small>
                  </div>
                  <div class="mb-3">
                    <label for="key_netlas" class="form-label">Netlas Key</label>
                    <input class="form-control" type="text" id="key_netlas" name="key_netlas" placeholder="Enter Netlas Key" value="{{netlas_key}}">
                    <small class="text-muted">Used to get whois information and other OSINT data.</small>
                  </div>
                  <div class="mb-3">
                    <label for="key_chaos" class="form-label">Chaos Key</label>
                    <input class="form-control" type="text" id="key_chaos" name="key_chaos" placeholder="Enter Chaos Key" value="{{chaos_key}}">
                    <small class="text-muted">Enhances reconnaissance capabilities for Public Bug Bounty Programs. <a href="https://cloud.projectdiscovery.io" target="_blank">Get your API key</a></small>
                  </div>
                  <div class="mb-3">
                    <label for="username_hackerone" class="form-label">HackerOne Username</label>
                    <input class="form-control" type="text" id="username_hackerone" name="username_hackerone" placeholder="Enter HackerOne Username" value="{{hackerone_username}}">
                  </div>
                  <div class="mb-3">
                    <label for="key_hackerone" class="form-label">HackerOne API Token</label>
                    <input class="form-control" type="text" id="key_hackerone" name="key_hackerone" placeholder="Enter HackerOne Token" value="{{hackerone_key}}">
                    <small class="text-muted">Used for importing targets, bookmarked programs, and submitting automated vulnerability reports. <a href="https://hackerone.com/settings/api_token/edit" target="_blank">Generate your API Token</a></small>
                  </div>
                </div>
              </div>
              <div class="text-end">
                <button class="btn btn-primary" type="submit">Complete Setup</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <script src="{% static 'assets/js/vendor.min.js' %}"></script>
  </body>
</html>